// Colors - all colors should be prefixed with `clr-`
//  This include everything except typography and elevation
//  Refer to _type and _surfaces for those palettes

:root {
  // Page background
  --clr-bg: hsl(240, 49%, 7%);

  // Brand primary
  --clr-primary-050: hsl(217, 82%, 77%);
  --clr-primary-100: hsl(217, 98%, 66%);
  --clr-primary-200: hsl(224, 97%, 49%);

  // Navbar
  --clr-navbar-bg: hsl(252, 22%, 5%);

  // Scrollbars
  --clr-scrollbar-bg: hsl(240, 52%, 5%);
  --clr-scrollbar-knob: hsl(240, 17%, 17%);
  --clr-scrollbar-knob-active: hsl(240, 15%, 20%);

  // Search bar
  --clr-search-bg: hsla(0, 0%, 0%, 0.98);
  --clr-search-results-border: hsla(0, 0%, 100%, 0.07);
  --clr-search-overlay-bg: hsla(0, 0%, 0%, 0.6);

  // Article snippet cards
  --clr-quote-border: hsl(223, 32%, 64%);
  --clr-table-border: hsl(235, 7%, 39%);
}
